<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <div id="app">
            <!-- fullName不用写括号的原因可以看下面 -->
            <div>{{fullName}}</div>
        </div>
    </head>
    <body>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊',
                    firstName: 'kobe',
                    lastName: 'bryant'
                },
                computed: {
                    /**
                     * 下面注释掉的其实计算属性的简写
                     * 
                     * **/
                    // fullName: function() {
                    //     return this.firstName + ' ' + this.lastName
                    // }
                    /**
                     * 这里是原本的计算属性写法
                     * fullName就是一个对象，里面有两个方法，get/set
                     * set一般不会写里面的内容，那么这个fullName就是一个只读属性，类似java
                     * **/
                    fullName: {
                        set: function() {

                        },
                        get: function() {
                            return this.firstName + ' ' + this.lastName
                        }
                    }
                    /**
                     * 现在再来看这段代码，就比较好理解了
                     * 1. 首先把set方法去掉
                     * 2. 只剩下一个get方法，就可以简写了
                     * 3. 虽然fullName看以来像是一个函数，但是其实它是一个对象！这也是为什么html中mustache可以直接掉这个属性而不用写括号的原因
                     * **/
                    // fullName: function() {
                    //     return this.firstName + ' ' + this.lastName
                    // }
                },
            })
        </script>
    </body>
</html>